<template>
    <div class="page_content">
        <div class="data-content">
            <div class="w-fixed-center">
                <div class="video-list">
                    <div v-for="item in apiData" :key="item.id" class="video">
                        <router-link :to="{ name: 'web_donation_detail', params: { id: item.id } }">
                            <img class="img" :src="imgDomainUrl + item.img" alt="">
                            <div class="mask mobile"></div>
                            <div class="tags mobile">
                                <span>扶弱济困</span>
                            </div>
                            <div class="title_p ccyc1">
                                {{ item.title }}
                            </div>
                            <div class="desc_p ccyc3">
                                {{ item.desc }}
                            </div>
                            <div class="bah ccyc1 mobile">
                                民政备案号:{{ item.organization_num }}
                            </div>
                            <div class="btn">
                                <span class="list">捐助</span>
                                <span class="list">分享</span>
                            </div>
                            <div class="icon">
                                <span class="list">
                                    <img src="@/assets/img/web/donation/list_icon1.png" alt="">
                                    <div class="title ccyc1">上线筹款1年</div>
                                    <div class="desc ccyc1">执行时间</div>
                                </span>
                                <span class="list">
                                    <img src="@/assets/img/web/donation/list_icon2.png" alt="">
                                    <div class="title ccyc1">已提交</div>
                                    <div class="desc ccyc1">执行计划&预算</div>
                                </span>
                                <span class="list">
                                    <img src="@/assets/img/web/donation/list_icon3.png" alt="">
                                    <div class="title ccyc1">累计反馈2次</div>
                                    <div class="desc ccyc1">进展反馈</div>
                                </span>
                                <span class="list">
                                    <img src="@/assets/img/web/donation/list_icon4.png" alt="">
                                    <div class="title ccyc1">近1年披露1次</div>
                                    <div class="desc ccyc1">财务披露</div>
                                </span>
                            </div>
                        </router-link>
                    </div>
                </div>

                <!-- 加载中 -->
                <div class="loading_more_div"
                    style="width: 100%; display: flex; justify-content: center;flex-direction: column;align-items: center;color:#999;">
                    <div><a-spin size="large" :spinning="isLoading"></a-spin></div>
                    <div>{{ isLoading ? '加载中……' : '' }}</div>
                    <div>{{ isLastPage ? '没有更多数据了' : '' }}</div>
                </div>

                <!-- 分页 -->
                <div class="pc">
                    <a-pagination v-model:current="currentPage" v-model:page-size="pageSize" :hideOnSinglePage=true
                        :showSizeChanger=false :total="dataTotle"
                        :show-total="(total, range) => `共 ${total} 条`"
                        v-show="dataTotle > 0 && !isLastPage" />
                </div>
            </div>
        </div>
        
        <!-- 滚动到顶部，右侧固定按钮 -->
        <scrollToTop></scrollToTop>

    </div>
</template>

<script setup>
import { message } from 'ant-design-vue';
import { ref, watch, onMounted, inject } from 'vue';   //引入ref
import scrollToTop from '@/components/web/page/scroll_to_top.vue';   //引入滚动到顶部的组件
import { getDonationList } from "@/api/web";   //引入api
//设置导航选中状态
import { webNavSelected } from '@/store/webNavSelected.js';
webNavSelected.set('donation');

// 引入滚动加载更多
import { useScroll } from '@/store/scroll.js';
const { scrollIsBottom, scrollTop, scrollHeight, clientHeight } = useScroll();

const isLoading = ref(true);    // 控制loading

const { imgDomainUrl } = inject('imgDomainUrl');  // 依赖注入--文件、图片前的域名

const isLastPage = ref(false);   //是否显示没有更多数据
const pageTotal = ref(1);   //共多少页数据
const pageSize = ref(9);   //每页多少条
const currentPage = ref(1); //当前第几页
const dataTotle = ref(0); //共多少条数据
const apiData = ref([]); // 接口获取到的数据

// 获取数据
const getData = () => {
    isLoading.value = true;
    const searchData = ref({ page: currentPage.value, limit: pageSize.value });
    //根据需求可以通过data传入参数
    getDonationList(searchData.value).then((res) => {
        isLoading.value = false;
        if (res === false) return;

        dataTotle.value = res.data.total;
        pageTotal.value = res.data.last_page;
        apiData.value.push(...res.data.data);
        isLastPage.value = pageTotal.value == currentPage.value;
    }).catch((rej) => {
        isLoading.value = false;
        message.error('错误：' + rej);
    });
}

// 进入页面执行一次
onMounted(() => {
    getData();
});

// 当变量值改变时触发
watch([scrollIsBottom, currentPage], async ([newscrollIsBottom, newcurrentPage], [oldscrollIsBottom, oldcurrentPage]) => {
    // 当页面滚动到底部并且当前不是在加载中并且当前页小于等于总页数时，加载下一页数据
    if (newscrollIsBottom && !isLoading.value && !isLastPage.value && newcurrentPage <= pageTotal.value) {
        if (oldcurrentPage == newcurrentPage && newcurrentPage + 1 <= pageTotal.value) {
            currentPage.value = newcurrentPage + 1;
        }
        getData();
    }
});

</script>

<style scoped>
.data-content {
    padding: 20rem 0;
    background-color: #f2f2f2;
}

.video-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.video {
    /* 应该是440，但是1650左右宽度时，会导致一行显示2个，所以改成439.8 */
    width: 439.95rem;
    margin-bottom: 40rem;
    border-radius: 8rem;
    margin-right: 40rem;
    background-color: #FFFFFF;
    overflow: hidden;
    position: relative;
    padding-bottom: 33rem;
}

.video:nth-child(3n) {
    margin-right: 0;
}

.video .img {
    width: 100%;
    height: 238rem;
    object-fit: cover;
}

.video .title_p {
    margin-top: 16rem;
    height: 30rem;
    line-height: 30rem;
    font-weight: 600;
    font-size: 22rem;
    color: #333333;
    padding: 0 20rem;
}

.video .desc_p {
    margin-top: 10rem;
    height: 64rem;
    font-weight: 400;
    font-size: 14rem;
    color: #666666;
    line-height: 22rem;
    padding: 0 20rem;
}

.video .btn {
    margin-top: 30rem;
    height: 46rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rem;
}

.video .btn>.list {
    width: 190rem;
    height: 100%;
    text-align: center;
    line-height: 46rem;
    font-size: 16rem;
    background: #D4352D;
    border-radius: 6rem;
    font-weight: 600;
    font-size: 14rem;
    color: #FFFFFF;
}

.video .icon {
    margin-top: 40rem;
    display: flex;
    justify-content: space-between;
    padding: 0 20rem;
}

.video .icon>.list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100rem;
}

.video .icon>.list>img {
    width: 30rem;
    height: 30rem;
}

.video .icon>.list>.title {
    margin-top: 12rem;
    height: 20rem;
    line-height: 20rem;
    font-weight: 600;
    font-size: 14rem;
    color: #333333;
}

.video .icon>.list>.desc {
    margin-top: 3rem;
    height: 17rem;
    line-height: 17rem;
    font-weight: 400;
    font-size: 12rem;
    color: #999999;
}


:deep(.ant-pagination) {
    display: flex;
    justify-content: flex-end;
}

:deep(.ant-pagination-item, .ant-pagination-jump-next, .ant-pagination-jump-prev) {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*手机端样式*/
@media screen and (max-width: 800px) {
    .w-fixed-center {
        width: 348rem;
    }

    .video-list {
        flex-direction: row;
    }

    .video {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15rem;
        padding-bottom: 20rem;
    }

    .video .img {
        height: 286rem;
    }

    .video .mask {
        position: absolute;
        top: 219rem;
        width: 100%;
        height: 67rem;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
        z-index: 3;
    }

    .video .title_p {
        position: absolute;
        top: 252rem;
        width: 100%;
        font-size: 16rem;
        z-index: 5;
        margin-top: 0;
    }

    .video .tags {
        position: absolute;
        top: 280rem;
        width: 100%;
        padding: 0 20rem;
    }

    .video .tags>span {
        width: 50rem;
        height: 17rem;
        line-height: 17rem;
        text-align: center;
        background-color: #FFFFFF;
        border-radius: 3rem;
        border: 1rem solid #C44337;
        font-weight: 400;
        font-size: 10rem;
        color: #D4352D;
        z-index: 6;
    }

    .video .desc_p {
        margin-top: 25rem;
        height: auto;
    }

    .video .bah {
        margin-top: 12rem;
        height: 14rem;
        font-weight: 400;
        font-size: 10rem;
        color: #999999;
        padding: 0 20rem;
        line-height: 14rem;
    }

    .video .btn {
        margin-top: 16rem;
    }

    .video .btn>.list {
        width: 148rem;
        font-size: 14rem;
    }

    .video .icon {
        margin-top: 26rem;
        padding: 0 20rem;
    }

    .video .icon>.list {
        width: 83.75rem;
    }

    .video .icon>.list>img {
        width: 22rem;
        height: 22rem;
    }

    .video .icon>.list>.title {
        margin-top: 7rem;
        height: 14rem;
        line-height: 14rem;
        font-size: 10rem;
    }

    .video .icon>.list>.desc {
        margin-top: 4rem;
        height: 14rem;
        line-height: 14rem;
        font-size: 10rem;
    }

    :deep(.ant-pagination) {
        justify-content: space-between;
    }

    :deep(.ant-pagination-total-text) {
        display: none;
    }
}
</style>
